<template>
  <div class="FromGood">
    <el-form
      :model="goodFrom"
      :rules="ruleGood"
      ref="goodFrom"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="门店名称" prop="name">
        <el-input
          v-model="goodFrom.storeName"
          placeholder="请输入门店名称"
          size="medium"
        ></el-input>
      </el-form-item>

      <el-form-item label="门店图片" prop="name">
        <el-input
          v-model="goodFrom.storeImage"
          placeholder="请输入图片链接"
        ></el-input>
      </el-form-item>
      <el-form-item label="门店电话" prop="name">
        <el-input
          v-model="goodFrom.storePhone"
          placeholder="请输入门店电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="门店地址" prop="name">
        <el-input
          v-model="goodFrom.storeAddress"
          placeholder="请输入门店地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="name">
        <el-input
          v-model="goodFrom.storeLng"
          placeholder="请输入经度"
        ></el-input>
      </el-form-item>
      <el-form-item label="维度" prop="name">
        <el-input
          v-model="goodFrom.storeLat"
          placeholder="请输入维度"
        ></el-input>
      </el-form-item>
      <el-form-item label="运营时间" prop="name">
        <el-input
          v-model="goodFrom.busineHours"
          placeholder="请输入营业时间(例：9:30-22:30"
        ></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="name">
        <el-select v-model="goodFrom.storeStatus" placeholder="请选择状态">
          <el-option label="未打烊" value="0"></el-option>
          <el-option label="打烊" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否支持预约" prop="name">
        <el-select v-model="goodFrom.supportOrder" placeholder="请选择">
          <el-option label="支持" value="1"></el-option>
          <el-option label="不支持" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店类型 " prop="name">
        <el-select v-model="goodFrom.storeType" placeholder="请选择类型">
          <el-option label="艾灸院" value="1"></el-option>
          <el-option label="普通门店" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店描述" prop="name">
        <el-input
          v-model="goodFrom.storeDescription"
          placeholder="请输入门店描述"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="产品分类" prop="region">
        <el-select v-model="goodFrom.region" placeholder="请选择产品分类">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="轮播图" prop="region">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="宣传图" prop="region">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="submitForm('goodFrom')"
          >立即添加</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      goodFrom: {
        storeName: "",
        storeImage: "",
        storePhone: "",
        storeAddress: "",
        storeLng: "",
        storeLat: "",
        busineHours: "",
        supportOrder: "1",
        storeStatus: "1",
        storeType: "2",
        storeDescription: "",
      },
      ruleGood: null,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  async created() {
    // this.initData();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.updateuser(this.goodFrom);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async updateuser(req) {
      req.storeType = parseInt(req.storeType);
      req.storeStatus = parseInt(req.storeStatus);
      req.supportOrder = parseInt(req.supportOrder);
      let type = "success",
        rmsg;
      let res = await this.http.post("/store/update", req);
      if (!res.error) {
        (type = "success"),
          (rmsg = "添加成功"),
          (this.goodFrom = {
            storeName: "",
            storeImage: "",
            storePhone: "",
            storeAddress: "",
            storeLng: "",
            storeLat: "",
            busineHours: "",
            supportOrder: "1",
            storeStatus: "1",
            storeType: "2",
            storeDescription: "",
          });
      } else {
        (type = "error"), (rmsg = "添加失败");
      }
      this.eui.Message({
        message: rmsg,
        type: type,
        duration: 5 * 1000,
      });
      this.loading = false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>